<template>
  <div class="contents">
    <div class="box channel">
      <div class="inside">
        <h4>渠道分布</h4>
        <div class="radar"></div>
      </div>
    </div>
    <div class="box">
      <div class="inside">
        <h4>一季度销售进度</h4>
        <div class="cake"></div>
        <div class="percent">50<span>%</span></div>
        <div class="item">
          <div>
            <h4>1,321</h4>
            <span
              ><i class="icon-dot" style="color: #6acca3"></i>销售额(万元)</span
            >
          </div>
          <div>
            <h4>150%</h4>
            <span><i class="icon-dot" style="color: #ed3f35"></i>同比增长</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import echarts from '@/util/echartsModule'
import adaptive from '@/util/adaptive.js'
export default {
  name: 'EchratChannel',

  data () {
    return {}
  },

  mounted () {
    this.figure()
    this.cake()
  },

  methods: {
    figure () {
      const chartDom = document.querySelector('.radar')
      // eslint-disable-next-line no-undef
      const myChart = echarts.init(chartDom)
      let option
      // eslint-disable-next-line prefer-const
      option = {
        tooltip: {
          trigger: 'item'
        },
        visualMap: {
          show: false,
          top: 'middle',
          right: 10,
          color: ['red', 'yellow'],
          calculable: true
        },
        radar: {
          center: ['50%', '50%'],
          radius: 50,
          startAngle: 90,
          // 修改文字颜色
          name: {
            textStyle: {
              color: '#4c9bfd'
            }
          },
          indicator: [
            { text: '汽车站', max: 400 },
            { text: '商场', max: 400 },
            { text: '地铁', max: 400 },
            { text: '火车站', max: 400 },
            { text: '机厂', max: 400 }
          ]
        },
        series: (function () {
          const series = []
          for (let i = 1; i <= 28; i++) {
            series.push({
              type: 'radar',
              symbol: 'none',
              lineStyle: {
                width: 1
              },
              emphasis: {
                areaStyle: {
                  color: 'rgba(0,250,0,0.3)'
                }
              },
              data: [
                {
                  value: [
                    (40 - i) * 10,
                    (38 - i) * 4 + 60,
                    i * 5 + 10,
                    i * 9,
                    (i * i) / 2
                  ],
                  name: i + 2000 + ''
                }
              ]
            })
          }
          return series
        })()
      }

      option && myChart.setOption(option)
      adaptive(myChart)
    },
    cake () {
      const chartDom = document.querySelector('.cake')
      const myChart = echarts.init(chartDom)
      const option = {
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['160%', '140%'],
            center: ['48%', '80%'],
            avoidLabelOverlap: false,
            startAngle: '180',
            label: {
              show: false,
              position: 'center'
            },
            // 是否显示引导线
            labelLine: {
              show: false
            },
            // 设置扇形点击偏移大小
            hoverOffset: 0,
            data: [
              {
                value: 100,
                itemStyle: {
                  color: '#00bedd'
                }
              },
              {
                value: 100,
                itemStyle: {
                  color: '#12274d'
                }
              },
              {
                value: 200,
                itemStyle: {
                  color: 'transparent'
                }
              }
            ]
          }
        ]
      }

      option && myChart.setOption(option)
      adaptive(myChart)
    }
  }
}
</script>

<style lang="less" scoped>
.contents {
  display: flex;
  justify-content: space-between;
  .box {
    height: 130px;
    width: 50%;
    .percent {
      position: absolute;
      top: 48%;
      left: 50%;
      transform: translateX(-50%);
      font-size: 30px;
      color: #fff;
      span {
        font-size: 15px;
        margin-left: 5px;
      }
    }
    .item {
      display: flex;
      justify-content: space-between;
      h4 {
        font-size: 24px;
        margin-bottom: 10px;
      }
      span {
        font-size: 14px;
        color: #4c9bfd;
        white-space: nowrap;
      }
    }
    .cake {
      position: relative;
      width: 100%;
      height: 80px;
      margin-top: 25px;
    }
  }
  .channel {
    margin-right: 20px;
    .radar {
      height: 88%;
    }
  }
}
</style>
